// 城市体检
<template>
  <div class="city-medical-container">
    <split-pane
      :min-percent="12"
      :max-percent="50"
      :default-percent="12"
      split="vertical"
    >
      <template slot="paneL">
        <div class="city-medical-aside">
          <!-- 左侧菜单树 -->
          <aside-menu
            :list="menuList"
            :defaultOpenId="defaultOpenId"
            @select-menu="selectedMenu"
            :active="defaultActive"
            @change-menu="changeMenu"
          />
        </div>
      </template>
      <template slot="paneR">
        <div class="city-medical-main">
          <div class="city-medical-main-view">
            <router-view />
          </div>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import aside from '@c/aside'
import splitPane from 'vue-splitpane'
export default {
  name: 'SystemManage',
  components: {
    'aside-menu': aside,
    'split-pane': splitPane,
  },
  data() {
    return {
      menu: {},
      defaultOpenId: '',
      menuList: [
        {
          id: 'user',
          index_name: '用户管理',
          icon_name: '用户管理',
          router: '/system-manage/user',
          is_single: true,
        },
        {
          id: 'department',
          index_name: '部门管理',
          icon_name: '部门管理',
          router: '/system-manage/department',
          is_single: true,
        },
        // {
        //   id: 'auth',
        //   index_name: '权限管理',
        //   icon_name: '权限管理',
        //   router: '/system-manage/auth',
        //   is_single: true,
        // },
        {
          id: 'basemap',
          index_name: '底图管理',
          icon_name: '底图管理',
          router: '/system-manage/basemap',
          is_single: true,
        },
        // {
        //   id: 'log',
        //   index_name: '日志管理',
        //   icon_name: '日志管理',
        //   router: '/system-manage/log',
        // },
      ],
      defaultActive: 'user',
    }
  },
  mounted() {
    this.menuList.forEach((menu) => {
      if (menu.children) {
        menu.children.forEach((child) => {
          if (child.router == this.$route.path) {
            this.defaultOpenId = child.id
          }
        })
      }
    })
    this.defaultActive = this.$route.name
  },
  methods: {
    selectedMenu(menu) {
      if (menu.singleMenu) {
        // 单个菜单，特殊处理
        return false
      }
      this.defaultOpenId = menu.id
      this.$router.replace(menu.router)
      this.menu = menu
    },
    changeMenu(id) {
      this.defaultActive = ''
      this.defaultActive = id
    },
  },
}
</script>

<style lang="scss" scoped>
.city-medical-container {
  height: 100%;
  width: 100%;
  background-color: RGBA(226, 230, 235, 1);
  position: relative;
  // display: flex;
  .city-medical-aside {
    width: 100%;
    height: 100%;
  }
  .city-medical-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: #f4f8fe;
    &-view {
      background-color: #fff;
      height: 100%;
    }
  }
}
</style>
